import React, { Component } from 'react';
import axios from 'axios'
import './App.css'


class App extends Component{
  state={
    statemsg:'最原始的data'
  }
  constructor(props){
    super(props)
    console.log('1执行App组件的constructor');


    //初始化数据的时候会把state中的数据给覆盖掉，也就是state中最原始的数据
    this.state={
      construmsg:"在constructor可以初始化状态",
      construarr:['可以创建ref','修改事件的this指向'],
      getDeri:[]
    }

    //创建ref
    this.ref=React.createRef();
    //修改事件的this指向
    this.handleClick=this.handleClick.bind(this)
  }
  handleClick(){
    console.log('普通函数，不是箭头函数在constructor中改变this指向')
    this.ref.current.focus()
    // this.setState({   不能改
    //   msg:"改了"
    // })
  }
  static getDerivedStateFromProps(props,state){
    // console.log(props)//{}
    console.log('2执行App组件的getDerivedStateFromProps');
    // return null;//表示不会和当前状态合并
    return {
      ...props,
      msg:"App中constructor的return出的msg",
  
      //添加状态到state

    }
  }
  render(){
    console.log('3.执行App组件的render');
    return (
      <div>
       
       <div className="outerBox" id="outerBox">
          <div className="innerBox"></div>
        </div>
       
        <input type="text" name="" id="" ref={this.ref}/>
        <button onClick={this.handleClick}>按钮</button>
      
            { this.state.getDeri.map(p=>{
              return <img src={p.image_src} alt="" key={p.goods_id}/>
            })}
      </div>
    )
  }
  componentDidMount(){
    console.log('4 执行App组件的componnentDidMount')
    axios.get('https://www.linweiqin.cn/api/public/v1/home/swiperdata').then(res=>{
      // console.log(res);
      this.setState({
        getDeri:res.data.message
      })
    })

    //挂载完了之后可以发送请求
    //可以订阅
    //可以注册事件
    document.getElementById('outerBox').addEventListener('scroll',function(e){
      console.log('盒子滚动了',e)
    })
  }
}

export default App;
